@import './variable.scss';

::v-deep .camera-dialog {
  // width: 50%;
  height: 70%;
  background-color: #1a4969;
  opacity: 0.97;
  // cursor: default;
  font-size: px(14);

  .el-dialog__header {
    padding: px(10) px(20);
    text-align: center;
    // background-color: #18659c;
    .el-icon-close,
    .el-dialog__title {
      color: #fff;
      font-size: px(18);
      line-height: px(24);
      height: px(24);
    }
  }
  .el-dialog__body {
    padding: px(10) px(20) 0;
    height: calc(100% - #{px(106)});
    .camera-scrollbar {
      width: 100%;
      height: 100%;
    }
    .camera-scrollbar__wrap {
      width: auto;
      overflow-x: hidden;
    }
    .el-form {
      height: 100%;
      .el-form-item__error{
        font-size: px(12);
        line-height: px(20);
        padding: 0;
      }
      .el-form-item {
        margin-bottom: px(22);
        margin-right: px(10);

        &__content {
          color: #fff;
          line-height: px(34);
          
        }
        &__label {
          line-height: px(32);
          font-size: px(16);
          color: #fff;
          width: px(120);
        }
        .el-input__inner {
          width: px(220);
          height: px(32);
          line-height: px(32);
          background-color: #1a4969;
          border: 1px solid rgba(gray, 0.8);
          color: #fff;
          font-size: px(16);
        }
        .el-select .el-input__inner{
          height: px(32) !important;
        }
        .el-select .el-input .el-select__caret,.el-input .el-input__clear{
          font-size: px(14);
        }
        .el-select .el-input__icon{
          line-height: px(32)
          
        }
      }
      .form-item-group {
        margin: px(5) 0;
        .svg-button {
          height: px(32);
          display: flex;
          align-items: center;
          margin-bottom: px(5);
        }
      }
      .group-item {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        .svg-icon {
          width: px(20);
          height: px(20);
          margin-right: px(5);
          cursor: pointer;
        }
        .add-label {
          color: #fff;
          cursor: pointer;
        }
        .el-input__inner {
          width: px(195);
        }
        &.add {
          margin-left: -1px;
          font-size: px(13);
          label {
            margin-left: px(3);
          }
          .valid-rule {
            color: #f56c6c;
            margin-left: px(20);
            font-size: px(12);
          }
        }
      }
      .el-textarea__inner {
        font-size: px(14);
        width: px(540);
        background-color: #1a4969;
        border: 1px solid rgba(gray, 0.8);
        color: #fff;
      }
    }
  }
  .el-dialog__footer {
    padding: 0 px(30) px(10);
    .el-button {
      background-color: #1a4969;
      color: #fff;
      height: px(32);
      width: px(70);
      font-size: px(14);
      border-radius: px(5);
      padding: 0;
      &:hover {
        background-color: #409eff;
      }
    }
  }

  .video-group-tree {
    right: px(30);
    position: absolute;
    bottom: 15%;
    height: px(400);
    width: px(220);
    background-color: #155175;
    border: 1px solid #fff;
    border-radius: px(7);
    .tree-scrollbar {
      border-radius: px(7);
      width: 100%;
      height: calc(100% - #{px(20)});
      // background-color: #172a47;
      background-color: #155175;

      .el-tree {
        background-color: #155175;
        color: #fff;

        .el-tree-node__label{
          font-size: px(14);
        }
         .el-tree-node__content {
          height: px(34);
          cursor: default;
          background-color: #155175;
          &:hover {
            background-color: #616d70;
          }
        }
        .el-tree-node.is-current > .el-tree-node__content {
          background-color: #4daeea;
          color: #ffffff;
        }
        .el-checkbox__input.is-checked {
          .el-checkbox__inner {
            background-color: green;
            border-color: green;
          }
        }
      }
    }
    .tree-scrollbar__wrap {
      width: auto;
      overflow-x: hidden;
      margin-right: -#{px(20)} !important;
    }
  }
}
